<template>
  <div class="assess w-full h-full flex flex-row gap-3">
    <div class="left h-full  w-1/3 flex flex-col  gap-3">
      <el-card class="h-55% w-full">
        <el-table :data="listData">
          <el-table-column type="index" width="50" />
          <el-table-column prop="projectName" label="项目名称" />
          <el-table-column prop="modelName" label="模型名称" />
          <el-table-column prop="type" label="模型类型" />
        </el-table>
      </el-card>
      <el-card class="flex-1 w-full">
        <el-table :data="indexData">
          <el-table-column type="index" width="50" />
          <el-table-column prop="name" label="评价指标" />
        </el-table>
      </el-card>
    </div>
    <div class="right h-full flex-1">
      <el-card class="w-full h-full">
        <el-tabs class="w-full h-full" v-model="activeName">
          <el-tab-pane class="w-full h-full mapIndex relative flex flex-col gap-3 " label="图示指标" name="0">
            <Echart class="w-240 !h-44%  flex justify-center items-center setBorder" ref="chartAccuracy"
              :options="chartOptions" />
            <Echart class="w-240 flex-1  flex justify-center items-center setBorder" ref="chartAccuracy"
              :options="chartOptions2" />
          </el-tab-pane>
          <el-tab-pane class="w-full h-full runpane overflow-y-scroll" label="训练参数" name="1">
            <div class="extraTitle"></div>
            <el-descriptions :class="`h-1/${Object.keys(training_config).length}`" :column="4"
              v-for="key in Object.keys(training_config)" :key="key">
              <el-descriptions-item v-for="c2key in Object.keys(training_config[key]) " :key="c2key"
                :label="TrainingConfigEnum[c2key] + '：'">{{ training_config[key][c2key] }}</el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { TrainingConfigEnum, training_config } from '../a-model/test'
import { option1, option2 } from './test'



const activeName = ref('0')
const listData = ref([])
const indexData = ref([])
const chartOptions = ref(option1 as any)
const chartOptions2 = ref(option2 as any)

onMounted(() => {
})

</script>

<style scoped lang="scss">
.setBorder {
  border: 1px solid #8b8b8b;
  border-radius: 1px;
}

.runpane {
  :deep(.el-descriptions__body) {
    .el-descriptions__table {
      background-color: rgba(239, 239, 239, 1) !important;
      height: 98% !important;
    }
  }
}

.right {
  :deep() {

    .el-card__body,
    .el-descriptions__body {
      height: 100%;
      width: 100%;
      overflow: hidden
    }
  }
}
</style>
